<template>
  <div class="case-container">
    <div class="title-container">
      <div class="title-left">
        <div class="title">案例推荐</div>
        <AsideNumber :data="asideData" />
      </div>
      <More />
    </div>
    <div class="detail-container">
      <CaseItem v-for="(item, i) in detailData" :key="i" :data="item" />
    </div>
  </div>
</template>

<script>
import AsideNumber from "./AsideNumber.vue";
import More from "./More.vue";
import CaseItem from "./CaseItem.vue";
import img1 from "@/assets/data/exports/Rectangle1397.png";
import img2 from "@/assets/data/exports/Rectangle13971.png";
import img3 from "@/assets/data/exports/Rectangle13972.png";
import img4 from "@/assets/data/exports/Rectangle13973.png";
export default {
  components: {
    AsideNumber,
    More,
    CaseItem,
  },
  data() {
    return {
      asideData: [
        {
          text: "案例推荐数量",
          number: 19,
        },
      ],
      detailData: [
        {
          img: img1,
          title: "工业互联网平台解决方案",
          company: "案例来自大数金科网络技术有限公司",
          tag: "工业互联网平台",
        },
        {
          img: img2,
          title: "5G智慧工厂应用解决方案",
          company: "案例来自四川创智联恒科技有限公司",
          tag: "工业互联网平台",
        },
        {
          img: img3,
          title: "5G+能源装备工业互联网创新试点示范",
          company: "案例来自东方电气集团科学技术研究院有限公司",
          tag: "工业互联网",
        },
        {
          img: img4,
          title: "积微物联-积微物联CM工业互联网",
          company: "案例来自积微物联CM工业互联网",
          tag: "工业互联网方案",
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.case-container {
  .title-container {
    height: 25px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    .title-left {
      height: 100%;
      display: flex;
      align-items: center;
      .title {
        font-size: 22px;
        font-weight: bold;
        display: inline-block;
        margin-right: 20px;
      }
    }
  }
  .detail-container {
    height: 476px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}
</style>
